 <template>
  <div class="orderList">
    <div class="header">
      <div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
        我的订单
        <div class="null"></div>
      </div>
      <div class="header-null"></div>
      <div class="container">
        <div class="tab">
          <Tabs value="name1">
            <TabPane label="全部" on-click='tabFun()' name="1">
              <div class="boxItem">
                <div class="cartTop">
                  <div class="shopImg">
                    <img src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg" alt="">
                		</div>
                    <div class="shopInfo">
                      <div class="l1">
                        <span class="goodName">芦荟胶</span>
                        <span class="payStatus">等待买家付款</span>
                      </div>
                      <div class="goodDes">盆栽植物不仅可以美化环境，还能净化空气呢，</div>
                      <div class="goodPrice">￥99.99</div>
                    </div>
                  </div>
                  <div class="cartBottom">
                    共计1件商品，合计￥99.99(含运费￥0.1)
                  </div>
                  <div class="btnGroup">
                    <Button type="default" shape="circle">取消订单</Button>
                    <Button type="success" shape="circle">付款</Button></div>
                   </div>
                    <div class="boxItem">
                <div class="cartTop">
                  <div class="shopImg">
                    <img src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg" alt="">
                		</div>
                    <div class="shopInfo">
                      <div class="l1">
                        <span class="goodName">绿花植物</span>
                        <span class="payStatus">已付款</span>
                      </div>
                      <div class="goodDes">盆栽植物不仅可以美化环境，还能净化空气呢，</div>
                      <div class="goodPrice">￥99.99</div>
                    </div>
                  </div>
                  <div class="cartBottom">
                    共计1件商品，合计￥99.99(含运费￥0.1)
                  </div>
                  <div class="btnGroup">
                    <Button type="default" shape="circle">取消订单</Button>
                    <Button type="success" shape="circle">付款</Button></div>
                   </div>
            </TabPane>
            <TabPane label="待付款" name="2">
            	 <div class="boxItem">
                <div class="cartTop">
                  <div class="shopImg">
                    <img src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg" alt="">
                		</div>
                    <div class="shopInfo">
                      <div class="l1">
                        <span class="goodName">芦荟胶</span>
                        <span class="payStatus">等待买家付款</span>
                      </div>
                      <div class="goodDes">盆栽植物不仅可以美化环境，还能净化空气呢，</div>
                      <div class="goodPrice">￥99.99</div>
                    </div>
                  </div>
                  <div class="cartBottom">
                    共计1件商品，合计￥99.99(含运费￥0.1)
                  </div>
                  <div class="btnGroup">
                    <Button type="default" shape="circle">取消订单</Button>
                    <Button type="success" shape="circle">付款</Button></div>
                   </div>
            </TabPane>
            <TabPane label="待发货" name="3">
            		 <div class="boxItem">
                <div class="cartTop">
                  <div class="shopImg">
                    <img src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg" alt="">
                		</div>
                    <div class="shopInfo">
                      <div class="l1">
                        <span class="goodName">芦荟胶</span>
                        <span class="payStatus">待发货</span>
                      </div>
                      <div class="goodDes">盆栽植物不仅可以美化环境，还能净化空气呢，</div>
                      <div class="goodPrice">￥99.99</div>
                    </div>
                  </div>
                  <div class="cartBottom">
                    共计1件商品，合计￥99.99(含运费￥0.1)
                  </div>
                  <div class="btnGroup">
                    <Button type="default" shape="circle">取消订单</Button>
                    <Button type="success" shape="circle">付款</Button></div>
                   </div>
            </TabPane>
            <TabPane label="待收货" name="4">
               	 <div class="boxItem">
                <div class="cartTop">
                  <div class="shopImg">
                    <img src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg" alt="">
                		</div>
                    <div class="shopInfo">
                      <div class="l1">
                        <span class="goodName">芦荟胶</span>
                        <span class="payStatus">待收货</span>
                      </div>
                      <div class="goodDes">盆栽植物不仅可以美化环境，还能净化空气呢，</div>
                      <div class="goodPrice">￥99.99</div>
                    </div>
                  </div>
                  <div class="cartBottom">
                    共计1件商品，合计￥99.99(含运费￥0.1)
                  </div>
                  <div class="btnGroup">
                    <Button type="default" shape="circle">取消订单</Button>
                    <Button type="success" shape="circle">付款</Button></div>
                   </div>
            </TabPane>
            <TabPane label="已完成" name="5">
            	
            		 <div class="boxItem">
                <div class="cartTop">
                  <div class="shopImg">
                    <img src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg" alt="">
                		</div>
                    <div class="shopInfo">
                      <div class="l1">
                        <span class="goodName">芦荟胶</span>
                        <span class="payStatus">已完成</span>
                      </div>
                      <div class="goodDes">盆栽植物不仅可以美化环境，还能净化空气呢，</div>
                      <div class="goodPrice">￥99.99</div>
                    </div>
                  </div>
                  <div class="cartBottom">
                    共计1件商品，合计￥99.99(含运费￥0.1)
                  </div>
                  <div class="btnGroup">
                    <Button type="default" shape="circle">取消订单</Button>
                    <Button type="success" shape="circle">付款</Button></div>
                   </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
</template>
<script type="text/javascript">
import couponMore from '../base/couponMoreMask';
import { Tabs, TabPane, Divider, Button } from 'iview';
import {getData} from '../service/getData'
export default {
  components: {
    Tabs,
    TabPane,
    Divider,
    Button
  },
  data() {
    return {
      tab1:[],
      tab2:[],
      tab3:[],
      tab4:[],
      tab5:[],
    }
  },
  mounted:{},
  methods: {
    getOrderList(obj,status,page){
         let that=this;
         getData('/sellerorders/getSellerOrdersByUserIdApi',{
          userId:sessionStorage.userId,
          page:page,
          sellerOrdersStatus:status
         }).then(d=>{
           console.log(d);
         })
    },
     
  }

}

</script>
<style lang='less' scoped>
.ivu-tabs-nav-next,.ivu-tabs-nav-prev{
	width: 0;
	height: 0;
}
.orderList {
  background: #eee;
}
.boxItem{
	background: #fff;
	padding-top: 10px;
}
.container {
  background: #eee;
  margin-top: 3px;

  .tab {
    background: #fff;
    overflow-y:scroll;
    height: 99vh;
  }
 
  .shopImg {
    padding: 0px 10px;
    width:30%;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .shopInfo{
  	width:70%;
  }

  .cartTop {
    display: flex;
  }

  .l1 {
    display: flex;

    .goodName {
      font-size: 16px;
      flex: 2;
      font-weight: bold;
    }

    .payStatus {
      padding-right: 5px;
      color: red;
    }

  }

  .goodDes {
    height: 40px;
    overflow: hidden;
    white-space: wrap;
    text-overflow: ellipsis;
  }

  .goodPrice {
    font-size: 16px;
    font-weight: bold;
    color: red;
  }

  .cartBottom {
    text-align: right;
    padding-right: 10px;
    line-height: 24px;
    border-bottom: 1px solid #F6F6F6;
  }

  .ivu-btn {
    padding: 5px 30px;
    margin: 5px;
  }

  .btnGroup {
    text-align: right;
    border-bottom:5px solid #F6F6F6;

  }
}

</style>
